<template>
<!-- 商务合作 -->
    <div class='business'>
        <div class="addserve" :style='{top:styleall}'>
            <el-button @click="addserve" class="fr" size="small" type="primary">保存</el-button>
        </div>
        <el-form ref="form" class="resform" label-width="120px">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>sci快速录用服务</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="quick_service.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述">
                            <uploadItem @openimg='openimg' maxlength="300" :item='quick_service' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>业务特色</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="business_features.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="左图">
                            <uploadItem @openimg='openimg' :item='business_features' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="中图">
                            <uploadItem @openimg='openimg' :item='business_features' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="右图">
                            <uploadItem @openimg='openimg' :item='business_features' :imgname="'img3'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>合作杂志社</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="cooperative_magazine.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="上图">
                            <uploadItem @openimg='openimg' :item='cooperative_magazine' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="左图">
                            <uploadItem @openimg='openimg' :item='cooperative_magazine' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="中图">
                            <uploadItem @openimg='openimg' :item='cooperative_magazine' :imgname="'img3'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="右图">
                            <uploadItem @openimg='openimg' :item='cooperative_magazine' :imgname="'img4'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>合作案例</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="cooperation_cases.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述">
                            <el-input v-model="cooperation_cases.input2" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="左标题">
                            <el-input v-model="cooperation_cases.input3" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="左描述">
                            <el-input v-model="cooperation_cases.input4" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="左图">
                            <uploadItem @openimg='openimg' :item='cooperation_cases' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="中标题">
                            <el-input v-model="cooperation_cases.input5" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="中描述">
                            <el-input v-model="cooperation_cases.input6" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="中图">
                            <uploadItem @openimg='openimg' :item='cooperation_cases' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="右标题">
                            <el-input v-model="cooperation_cases.input7" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="右描述">
                            <el-input v-model="cooperation_cases.input8" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="右图">
                            <uploadItem @openimg='openimg' :item='cooperation_cases' :imgname="'img3'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>合作优势</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="cooperation_advantages.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="左图">
                            <uploadItem @openimg='openimg' :item='cooperation_advantages' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="右图">
                            <uploadItem @openimg='openimg' :item='cooperation_advantages' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>合作模式</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="cooperation_mode.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述">
                            <el-input v-model="cooperation_mode.input2" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="下图">
                            <uploadItem @openimg='openimg' :item='cooperation_mode' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>项目收益</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="project_income.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="下图">
                            <uploadItem @openimg='openimg' :item='project_income' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>联系我们</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="联系人">
                            <el-input v-model="contact.input1" maxlength="50" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话">
                            <el-input v-model="contact.input2" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="邮箱">
                            <el-input v-model="contact.input3" maxlength="50" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="微信图">
                            <uploadItem @openimg='openimg' :item='contact' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import uploadItem from "@/views/web/components/uploadItem";
import { selectPages,addPageValue,updatePageValue} from "@/api/pc.js"
export default {
    name:'Business',
    data(){
       return{
        uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
        headers: { Authorization: "Bearer " + getToken()},
        // 图片弹窗
        dialogVisible:false,
        // 弹窗图片地址
        dialogImageUrl:'',
        // sci快速录用服务
        quick_service:{input1:'',img1:''},
        // 业务特色
        business_features:{input1:'',img1:'',img2:'',img3:'',},
        // 合作杂志社
        cooperative_magazine:{input1:'',img1:'',img2:'',img3:'',img4:'',},
        // 合作模式
        cooperation_mode:{input1:'',input2:'',img1:''},
        // 合作案例
        cooperation_cases:{input1:'',input2:'',input3:'',input4:'',input5:'',input6:'',input7:'',input8:'',img1:'',img2:'',img3:'',},
        // 合作优势
        cooperation_advantages:{input1:'',input2:'',img1:''},
        // 项目收益
        project_income:{input1:'',img1:''},
        // 联系我们
        contact:{input1:'',input2:'',input3:'',img1:''},
        // 编辑
        edit:false,
        // 编辑
        pageId:'',
        // 样式
        styleall:{},
       }
    },
    components:{uploadItem},
    mounted(){this.getdata();window.addEventListener('scroll',this.handleScroll);},
    methods:{
        // 滚动事件
        handleScroll(){
            // 滚动条偏移量
            let scrollTop = document.documentElement.scrollTop;
            if(scrollTop>80){this.styleall ='0px';}else{ this.styleall =(80 - scrollTop) +'px'; }
        },
        // 保存
        addserve(){
            let objall = {
                quick_service:this.quick_service,
                business_features:this.business_features,
                cooperative_magazine:this.cooperative_magazine,
                cooperation_mode:this.cooperation_mode,
                cooperation_cases:this.cooperation_cases,
                cooperation_advantages:this.cooperation_advantages,
                project_income:this.project_income,
                contact:this.contact,
            }
            let obj={pageName:'商务合作',pageType:'business',pageValue:JSON.stringify(objall),}
            if(!this.edit){
                addPageValue(obj).then(res=>{
                    console.log(res)
                    if(res.code==200){this.$message.success('保存成功！')}
                })
            }else{
                obj.pageId = this.pageId;
                updatePageValue(obj).then(res=>{
                    console.log(res)
                    if(res.code==200){this.$message.success('更新成功！')}
                })
            }
        },
        // 获取数据
        getdata(){
            selectPages({pageType:'business'}).then(res=>{
                if(res.code==200){
                     if(res.data.length==0){
                        this.edit = false;
                    }else{
                        this.edit = true;
                        this.pageId = res.data[0].pageId;
                        console.log(JSON.parse(res.data[0].pageValue))
                        let obk = JSON.parse(res.data[0].pageValue);
                        this.business_features = obk.business_features;
                        this.contact = obk.contact;
                        this.cooperation_advantages = obk.cooperation_advantages;
                        this.cooperation_cases = obk.cooperation_cases;
                        this.cooperation_mode = obk.cooperation_mode;
                        this.cooperative_magazine = obk.cooperative_magazine;
                        this.project_income = obk.project_income;
                        this.quick_service = obk.quick_service;
                    }
                }
            })
        },
        // 打开全屏图片
        openimg(val){
            this.dialogImageUrl = val;
            this.dialogVisible = true;
        },
    }
}
</script>
<style lang='scss' scoped>
.business{
    width: 100%;
    height: 100%;
    padding: 20px;
    padding-top: 50px;
}
.addserve{
    width: 100%;
    height: 40px;
    position: fixed;
    top:80px;
    left: 0;
    background-color: #fff;
    padding-right: 30px;
    z-index: 101;
    button{
        margin-top: 4px;
        width: 100px;
    }
}
</style>